<template>
  <div class="dashboard">
    <!-- 顶部导航区 -->
    <el-row :gutter="10" class="top-bar">
      <!-- 左侧标签 -->
      <el-col :span="8">
        <div class="tags">
          <span class="tag with-badge">
            待审核
            <el-badge :value="99" type="primary" />
          </span>
          <span class="tag">待出入库</span>
          <span class="tag">预警信息</span>
        </div>
      </el-col>
      <!-- 中间统计卡片 -->
      <el-col :span="16">
        <el-row :gutter="10">
          <el-col :span="4" v-for="(item, idx) in cardData" :key="idx">
            <div class="stat-card">
              <div class="card-title">{{ item.title }}</div>
              <div class="card-value">{{ item.value }}</div>
            </div>
          </el-col>
          <!-- 剩余卡片（值为0的） -->
          <el-col :span="4">
            <div class="stat-card">
              <div class="card-title">购货退货单</div>
              <div class="card-value">0</div>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="stat-card">
              <div class="card-title">收款单</div>
              <div class="card-value">0</div>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="stat-card">
              <div class="card-title">付款单</div>
              <div class="card-value">0</div>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="stat-card">
              <div class="card-title">其他支出单</div>
              <div class="card-value">0</div>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="stat-card">
              <div class="card-title">其他收入单</div>
              <div class="card-value">0</div>
            </div>
          </el-col>
        </el-row>
        <!-- 时间筛选 -->
        <el-row style="margin-top: 10px; text-align: right">
          <el-button type="text">近一周</el-button>
          <el-button type="text">近一月</el-button>
          <el-button type="text">近一年</el-button>
        </el-row>
      </el-col>
    </el-row>

    <!-- 中间统计区（销货/购货切换） -->
    <el-tabs v-model="activeTab" class="middle-tabs" style="margin-top: 10px">
      <el-tab-pane label="销货" name="sales">
        <div class="chart-row">
          <!-- 折线图 -->
          <div class="chart-container">
            <div id="salesChart" style="width: 100%; height: 200px"></div>
          </div>
          <!-- 单品排名 -->
          <div class="rank-panel">
            <div class="rank-title">单品金额排名</div>
            <ul class="rank-list">
              <li v-for="(item, idx) in 6" :key="idx">
                <span class="rank-num">{{ idx + 1 }}</span>
                <span class="rank-name">-</span>
                <span class="rank-amount">¥0.00</span>
              </li>
            </ul>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="购货" name="purchase">
        <div class="chart-row">
          <div class="chart-container">
            <div id="purchaseChart" style="width: 100%; height: 200px"></div>
          </div>
          <div class="rank-panel">
            <div class="rank-title">单品金额排名</div>
            <ul class="rank-list">
              <li v-for="(item, idx) in 6" :key="idx">
                <span class="rank-num">{{ idx + 1 }}</span>
                <span class="rank-name">-</span>
                <span class="rank-amount">¥0.00</span>
              </li>
            </ul>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>

    <!-- 资产明细区（环形图） -->
    <el-row :gutter="20" class="asset-section" style="margin-top: 10px">
      <el-col :span="8">
        <div class="asset-card">
          <div class="asset-title">库存</div>
          <div id="stockChart" style="width: 100%; height: 150px"></div>
          <div class="asset-legend">
            <div>
              <span class="dot" style="background: #409eff"></span>库存总量
            </div>
            <div>
              <span class="dot" style="background: #67c23a"></span>库存成本
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="asset-card">
          <div class="asset-title">资金</div>
          <div id="fundChart" style="width: 100%; height: 150px"></div>
          <div class="asset-legend">
            <div><span class="dot" style="background: #e6a23c"></span>现金</div>
            <div>
              <span class="dot" style="background: #409eff"></span>银行存款
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="asset-card">
          <div class="asset-title">欠款</div>
          <div id="debtChart" style="width: 100%; height: 150px"></div>
          <div class="asset-legend">
            <div>
              <span class="dot" style="background: #9966ff"></span>客户欠款
            </div>
            <div>
              <span class="dot" style="background: #f56c6c"></span>供应商欠款
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 右侧信息区 -->
    <el-row :gutter="10" class="right-section" style="margin-top: 10px">
      <el-col :span="12">
        <!-- 采购销售情况 -->
        <div class="side-card">
          <div class="side-title">本月采购销售情况</div>
          <div class="sales-purchase">
            <div class="section">
              <div class="section-title">销售</div>
              <p>销售收入：0</p>
              <p>销售毛利：0</p>
            </div>
            <div class="section">
              <div class="section-title">采购</div>
              <p>采购金额：0</p>
              <p>商品种类：0</p>
            </div>
          </div>
        </div>
        <!-- 产品公告 -->
        <div class="side-card" style="margin-top: 10px">
          <div class="side-title">产品公告</div>
          <ul class="notice-list">
            <li v-for="(item, idx) in notices" :key="idx">
              <span>{{ item.title }}</span>
              <span class="notice-time">{{ item.time }}</span>
            </li>
          </ul>
        </div>
      </el-col>
      <el-col :span="12">
        <!-- 满意度调查（替换为实际图片） -->
        <div class="side-card">
          <img src="@/assets/survey.png" alt="满意度调查" style="width: 100%" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";

// 响应式数据
const activeTab = ref("sales");
const cardData = [
  { title: "销货单", value: 131 },
  { title: "销货订单", value: 97 },
  { title: "购货订单", value: 22 },
  { title: "购货单", value: 22 },
];
const notices = [
  { title: "4月重磅功能来袭：新增4项价格计...", time: "2025-04-18 09:31:01" },
  { title: "[功能更新] 产品更新公告_V12.27", time: "2024-12-27 09:38:58" },
  { title: "[功能更新] 产品更新公告_V12.03", time: "2024-12-31 02:09:16" },
];

// 初始化图表（onMounted中执行）
onMounted(() => {
  // 折线图配置（销货/购货复用）
  const lineOption = {
    xAxis: {
      type: "category",
      data: ["6/20", "6/21", "6/22", "6/23", "6/24", "6/25", "6/26"],
    },
    yAxis: { type: "value", max: 0.8, min: 0, interval: 0.2 },
    series: [{ data: [0, 0, 0, 0, 0, 0, 0], type: "line", smooth: true }],
  };
  // 初始化折线图
  echarts.init(document.getElementById("salesChart")).setOption(lineOption);
  echarts.init(document.getElementById("purchaseChart")).setOption(lineOption);

  // 环形图配置（库存）
  const stockOption = {
    series: [
      {
        type: "pie",
        radius: ["50%", "70%"],
        center: ["50%", "50%"],
        data: [
          { value: 1, name: "库存总量" },
          { value: 1, name: "库存成本" },
        ],
        label: { show: false },
        emphasis: {
          label: { show: true, position: "center", formatter: "库存成本" },
        },
      },
    ],
  };
  echarts.init(document.getElementById("stockChart")).setOption(stockOption);

  // 环形图配置（资金）
  const fundOption = {
    series: [
      {
        type: "pie",
        radius: ["50%", "70%"],
        center: ["50%", "50%"],
        data: [
          { value: 1, name: "现金" },
          { value: 1, name: "银行存款" },
        ],
        label: { show: false },
        emphasis: {
          label: { show: true, position: "center", formatter: "现金" },
        },
      },
    ],
  };
  echarts.init(document.getElementById("fundChart")).setOption(fundOption);

  // 环形图配置（欠款）
  const debtOption = {
    series: [
      {
        type: "pie",
        radius: ["50%", "70%"],
        center: ["50%", "50%"],
        data: [
          { value: 1, name: "客户欠款" },
          { value: 1, name: "供应商欠款" },
        ],
        label: { show: false },
        emphasis: {
          label: { show: true, position: "center", formatter: "客户欠款" },
        },
      },
    ],
  };
  echarts.init(document.getElementById("debtChart")).setOption(debtOption);
});
</script>

<style scoped>
/* 全局容器 */
.dashboard {
  padding: 10px;
  background: #f5f7fa;
}

/* 顶部导航 */
.top-bar {
  background: #fff;
}
.tags {
  display: flex;
  gap: 20px;
  font-size: 14px;
  padding: 10px 0;
}
.tag {
  cursor: pointer;
}
.with-badge .el-badge {
  margin-left: 5px;
}
.stat-card {
  background: #f8f9fa;
  padding: 10px;
  border-radius: 4px;
  text-align: center;
}
.card-title {
  font-size: 12px;
  color: #999;
}
.card-value {
  font-size: 16px;
  font-weight: bold;
  margin-top: 5px;
}

/* 中间统计区 */
.middle-tabs {
  background: #fff;
}
.chart-row {
  display: flex;
  justify-content: space-between;
  padding: 10px;
}
.chart-container {
  flex: 1;
}
.rank-panel {
  width: 30%;
  padding: 0 10px;
}
.rank-title {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 10px;
}
.rank-list {
  list-style: none;
  padding: 0;
}
.rank-list li {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
  font-size: 12px;
}
.rank-num {
  color: #999;
}

/* 资产明细区 */
.asset-section {
  background: #fff;
}
.asset-card {
  text-align: center;
}
.asset-title {
  font-size: 14px;
  font-weight: bold;
  margin: 10px 0;
}
.asset-legend {
  margin-top: 10px;
  font-size: 12px;
}
.asset-legend .dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 5px;
}

/* 右侧信息区 */
.right-section {
  background: #fff;
}
.side-card {
  background: #f8f9fa;
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 10px;
}
.side-title {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 10px;
}
.sales-purchase {
  display: flex;
  justify-content: space-between;
}
.section {
  flex: 1;
}
.section-title {
  font-weight: bold;
  margin-bottom: 5px;
}
.notice-list {
  list-style: none;
  padding: 0;
  font-size: 12px;
}
.notice-list li {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}
.notice-time {
  color: #999;
}
</style>